<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.nickName"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入昵称"
      />
      <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.userPhone"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入手机号"
      />
       <el-input
        clearable
        @keyup.enter.native="handleFilter"
        v-model="listQuery.outTradeNo"
        style="width: 200px;margin-right:15px;margin-top:7px"
        class="filter-item"
        placeholder="请输入支付流水号"
      />
     <el-input
          clearable
          @keyup.enter.native="handleFilter"
          v-model="listQuery.cardNoExternal"
          style="width: 200px;margin-right:15px;margin-top:7px"
          class="filter-item"
          maxlength="20"
          placeholder="请输入Ic卡标识码"
        />
 <el-select
        v-model="listQuery.orderType"
        placeholder="请选择充类型"
        clearable
        class="filter-item"
        style="width: 200px;margin-right:15px;margin-top:7px"
      >
        <el-option label="余额充值" value="1"></el-option>
        <el-option label="ic卡充值" value="2"></el-option>
  
      </el-select>
        
              <!-- 2022.09.07  合并为时间日期选择器 -->
      <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:00"
        @change="getDateTime"
      >
      </el-date-picker>
 <!-- <el-date-picker v-model="listQuery.startTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 200px;margin-right:15px;margin-top:7px"

                          placeholder="选择开始日期"></el-date-picker>
          <el-date-picker v-model="listQuery.endTime"
                          type="datetime"
          style="width: 200px;margin-right:15px;margin-top:7px"

                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择结束日期"></el-date-picker> -->
        
        <br />
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
      <el-button
        type="primary"
        class="filter-item"
        @click="handleDownload"
        icon="el-icon-download"
        :loading="downloadLoading"
      >导出</el-button>
    </div>
    <!-- table 表格 -->
    <el-table
      :data="list"
      v-loading="loading.list"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
      max-height="830"
    >
      <el-table-column label="序号" prop="index" align="center" width="80px"/>
      <el-table-column label="昵称" prop="nickName" align="center"/>
      <el-table-column label="手机号" prop="userPhone" align="center"/>
      <el-table-column label="支付流水号" prop="outTradeNo" align="center"/>
      <el-table-column label="ic卡标识码" prop="cardNoExternal" align="center" />
      <el-table-column label="充值类型" prop="orderTypeInfo" align="center" />
      <el-table-column label="实际金额(元)" prop="amountInfo" align="center" />
      <el-table-column label="赠送金额(元)" prop="givenAmountInfo" align="center" />
      <el-table-column label="支付类型" prop="payTypeInfo" align="center"/>
      <el-table-column label="支付时间" prop="payTime" align="center"/>
      <el-table-column label="创建时间" prop="ctime" align="center"/>

    </el-table>

    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.offset"
        :page-sizes="[10, 20, 30, 40,100,300,500,5000,10000]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getOrderRechargerList } from "@/api/orderRecharge";
import { parseTime, getdTime } from "@/utils";
export default {
  name: "equipmentOrders_orderRecharge",
  data() {
    return {
      dateTime:"",
      total: 0,
      listQuery: {
        offset: 1,
        limit: 10,
        outTradeNo: "",
       orderType:"",
         cardNoExternal:"",
        nickName: "",
        userPhone: "",
        payType: "",
        startTime: "",
        endTime: ""
      },
      refundQuery:{
        orderRefundAmount: "",
        orderRefundReason: "",
        orderId: ""
      },
 
      bindRules2: {},
      dialog1: {
        add: false
      },
      dialog2: {
        add: false
      },
      list: null,
      loading: {
        list: false,
        download: false
      },
      categoryList: [],
      downloadLoading: false
    };
  },
  methods: {
        getDateTime(value) {
      if (value) {
        this.listQuery.startTime = value[0];
        this.listQuery.endTime = value[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    //导出
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "昵称",
          "手机号",
          "支付流水号",
          "ic卡标识码",
          "充值类型",
          "实际金额(元)",
          "赠送金额(元)",
          "支付类型",
          "支付时间",
          "创建时间",
        ];
        const filterVal = [
          "nickName",
          "userPhone",
          "outTradeNo",
          "cardNoExternal",
          "orderTypeInfo",
          "amountInfo",
          "givenAmountInfo",
          "payTypeInfo",
          "payTime",
          "ctime",
        ];
     const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "充值订单列表"
        });
        this.downloadLoading = false;
      });
    },
    resetForm(flag) {
      this.$refs.bindForm && this.$refs.bindForm.resetFields();
      if (flag) {
        this.refundQuery = {
          id: "",
        };
      }
    },
  // 数据筛选
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
          return v[j]
      }))
    },
    //获取设备订单列表
    async getOrderRechargerList() {
      this.loading.list = true;
      try {
         //调用服务器接口
        const { data } = await getOrderRechargerList({ ... this.listQuery });
        this.list = data.records.map((item, index) => {
          return {
            index: index + 1,
              payStatusInfo:item.payStatus==1?"待支付":"已支付",
              orderTypeInfo:item.orderType==1?"余额充值":"ic卡充值",
              cardNoExternal:item.cardNoExternal?item.cardNoExternal:"-",
              amountInfo:item.amount/100,
              givenAmountInfo:item.givenAmount/100,
             payTypeInfo:item.payType==1?"微信":item.payType==2?"支付宝":item.payType==3?"余额":item.payType==4?"会员卡":"-",
          ...item
          };
        });
        this.total = data.total;
      } catch (error) {}
      this.loading.list = false;
    },
    handleFilter() {
      this.listQuery.offset = 1;
      this.getOrderRechargerList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getOrderRechargerList();
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val;
      this.getOrderRechargerList();
    },
    formatDate(date, offset) {
      if (date && typeof date == "object") {
        const d = date[offset];
        return new Date(d).getTime();
      }
      return "";
    }
  },
  created() {
    this.getOrderRechargerList();
  }
};
</script>
